// 页面的数据
var data = [];
var data1 = [
    { number: '20200201', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2020-2-17 21:00:00' },
    { number: '20200202', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2020-2-17 21:00:00' },
    { number: '20200203', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2020-2-17 21:00:00' },
    { number: '20200204', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2020-2-17 21:00:00' },
    { number: '20200205', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2020-2-17 21:00:00' },
    { number: '20200206', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2020-2-17 21:00:00' },
    { number: '20200207', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2020-2-17 21:00:00' },
    { number: '20200208', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2020-2-17 21:00:00' },
    { number: '20200209', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2020-2-17 21:00:00' },
    { number: '20200210', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2020-2-17 21:00:00' },
    { number: '20200211', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2020-2-17 21:00:00' },
    { number: '20200212', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2020-2-17 21:00:00' },
    { number: '20200213', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2020-2-17 21:00:00' },
    { number: '20200214', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2020-2-17 21:00:00' },
    { number: '20200215', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2020-2-17 21:00:00' },
    { number: '20200216', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2020-2-17 21:00:00' },
    { number: '20200217', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2020-2-17 21:00:00' },
    { number: '20200218', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2020-2-17 21:00:00' },
    { number: '20200219', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2022-8-17 21:00:00' },
    { number: '20200220', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2020-2-17 21:00:00' },
    { number: '20200221', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2020-2-17 21:00:00' },
    { number: '20200222', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2020-2-17 21:00:00' },
    { number: '20200223', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2020-2-17 21:00:00' },
    { number: '20200224', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2020-2-17 21:00:00' },
    { number: '20200225', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2020-2-17 21:00:00' },
    { number: '20200226', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2020-2-17 21:00:00' },
    { number: '20200227', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2020-2-17 21:00:00' },
    { number: '20200228', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2020-2-17 21:00:00' },
    { number: '20200229', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2022-8-20 21:00:00' },
    { number: '20200230', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2020-2-17 21:00:00' },
    { number: '20200231', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2020-2-17 21:00:00' },
    { number: '20200232', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2022-8-17 21:00:00' },
    { number: '20200233', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2020-2-17 21:00:00' },
    { number: '20200234', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2022-7-28 21:00:00' },
    { number: '20200235', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2022-8-17 21:00:00' },
    { number: '20200236', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2022-8-17 21:00:00' },
    { number: '20200237', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2020-2-17 21:00:00' },
    { number: '20200238', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2022-8-17 21:00:00' },
    { number: '20200239', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2022-8-18 21:00:00' },
    { number: '20200240', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2022-8-21 22:00:00' },
    { number: '20200241', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2020-2-17 21:00:00' },
    { number: '20200242', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2022-8-17 21:00:00' },
    { number: '20200243', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2020-2-17 21:00:00' },
    { number: '20200244', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2022-8-21 21:00:00' },
    { number: '20200244', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2022-8-21 21:00:00' },
    { number: '20200244', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2022-8-21 21:00:00' },
    { number: '20200244', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2022-8-21 21:00:00' },
    { number: '20200244', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2022-8-21 21:00:00' },
    { number: '20200244', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2022-8-21 21:00:00' },
    { number: '20200244', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2022-8-21 21:00:00' },
    { number: '20200244', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2022-8-21 21:00:00' },
    { number: '20200244', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2022-8-21 21:00:00' },
    { number: '20200244', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2022-8-21 21:00:00' },
    { number: '20200244', user: '18812341234', money: '200', source: '挂号预约', payment: '微信', state: '成功', time: '2022-8-21 21:00:00' },]
var data2 = [
    { number: '10200201', user: '18812341234', refund: '200', source: '挂号预约', payment: '微信', state: '失败', time: '2020-2-17 21:00:00' },
    { number: '10200202', user: '18812341234', refund: '200', source: '挂号预约', payment: '微信', state: '失败', time: '2020-2-17 21:00:00' },
    { number: '10200203', user: '18812341234', refund: '200', source: '挂号预约', payment: '微信', state: '失败', time: '2020-2-17 21:00:00' },
    { number: '10200204', user: '18812341234', refund: '200', source: '挂号预约', payment: '微信', state: '失败', time: '2020-2-17 21:00:00' },
    { number: '10200205', user: '18812341234', refund: '200', source: '挂号预约', payment: '微信', state: '失败', time: '2020-2-17 21:00:00' },
    { number: '10200206', user: '18812341234', refund: '200', source: '挂号预约', payment: '微信', state: '失败', time: '2022-8-21 21:00:00' },
    { number: '10200207', user: '18812341234', refund: '200', source: '挂号预约', payment: '微信', state: '失败', time: '2022-8-21 21:00:00' },
    { number: '10200208', user: '18812341234', refund: '200', source: '挂号预约', payment: '微信', state: '失败', time: '2022-8-21 21:00:00' },
    { number: '10200209', user: '18812341234', refund: '200', source: '挂号预约', payment: '微信', state: '失败', time: '2022-8-21 21:00:00' },
    { number: '10200210', user: '18812341234', refund: '200', source: '挂号预约', payment: '微信', state: '失败', time: '2022-8-21 21:00:00' },
    { number: '10200211', user: '18812341234', refund: '200', source: '挂号预约', payment: '微信', state: '失败', time: '2022-8-21 21:00:00' },
    { number: '10200212', user: '18812341234', refund: '200', source: '挂号预约', payment: '微信', state: '失败', time: '2022-8-21 21:00:00' },
    { number: '10200213', user: '18812341234', refund: '200', source: '挂号预约', payment: '微信', state: '失败', time: '2022-8-21 21:00:00' },
    { number: '10200214', user: '18812341234', refund: '200', source: '挂号预约', payment: '微信', state: '失败', time: '2022-8-21 21:00:00' },
    { number: '10200215', user: '18812341234', refund: '200', source: '挂号预约', payment: '微信', state: '失败', time: '2022-8-21 21:00:00' },
    { number: '10200216', user: '18812341234', refund: '200', source: '挂号预约', payment: '微信', state: '失败', time: '2022-8-21 21:00:00' },
    { number: '10200217', user: '18812341234', refund: '200', source: '挂号预约', payment: '微信', state: '失败', time: '2022-8-21 21:00:00' },
    { number: '10200218', user: '18812341234', refund: '200', source: '挂号预约', payment: '微信', state: '失败', time: '2022-8-21 21:00:00' },
    { number: '10200219', user: '18812341234', refund: '200', source: '挂号预约', payment: '微信', state: '失败', time: '2022-8-21 21:00:00' },
    { number: '10200220', user: '18812341234', refund: '200', source: '挂号预约', payment: '微信', state: '失败', time: '2022-8-21 21:00:00' },
    { number: '10200221', user: '18812341234', refund: '200', source: '挂号预约', payment: '微信', state: '失败', time: '2022-8-21 21:00:00' },
    { number: '10200222', user: '18812341234', refund: '200', source: '挂号预约', payment: '微信', state: '失败', time: '2020-2-17 21:00:00' },
    { number: '10200223', user: '18812341234', refund: '200', source: '挂号预约', payment: '微信', state: '失败', time: '2020-2-17 21:00:00' },
    { number: '10200224', user: '18812341234', refund: '200', source: '挂号预约', payment: '微信', state: '失败', time: '2020-2-17 21:00:00' },
    { number: '10200225', user: '18812341234', refund: '200', source: '挂号预约', payment: '微信', state: '失败', time: '2020-2-17 21:00:00' },
    { number: '10200226', user: '18812341234', refund: '200', source: '挂号预约', payment: '微信', state: '失败', time: '2020-2-17 21:00:00' },
    { number: '10200227', user: '18812341234', refund: '200', source: '挂号预约', payment: '微信', state: '失败', time: '2020-2-17 21:00:00' },
    { number: '10200228', user: '18812341234', refund: '200', source: '挂号预约', payment: '微信', state: '失败', time: '2020-2-17 21:00:00' },
    { number: '10200229', user: '18812341234', refund: '200', source: '挂号预约', payment: '微信', state: '失败', time: '2020-2-17 21:00:00' },

]
// 当前的页码
var page = 1;
//每页的条数
var count = 10;
var oTBody = document.querySelector('tbody');
// 获取分页容器
var oPagination = document.querySelector('.pagination');
// 获取上一页的按钮
var oPrevBtn = document.querySelector('.prev');
//获取下一页的按钮
var oNextBtn = document.querySelector('.next');
//获取最近一周的按钮
var oWeekBtn = document.querySelector('#week');
// 获取一个月的按钮
var oMonthBtn = document.getElementById('month');
//获取全部按钮
var oWholeBtn = document.getElementById('whole');
//获取导出按钮
var oDeriveBtn = document.getElementById('derive');
//获取日历
var oStart = document.getElementById('start');
var oEnd = document.getElementById('end');
//获取订单总数
var totalOrders = document.querySelector('.order');
//获取页码插入位置
var addPage = document.querySelector('#change');
//获取销售总额
var totalSales = document.querySelector('.sales');
//获取有效订单总额a
var totalValid = document.querySelector('.valid');
//获取成交记录按钮
var oTransactionBtn = document.querySelector('.transaction');
//获取退款记录按钮
var oRefundBtn = document.querySelector('.refund');
//获取插入表头的位置
var oThead = document.querySelector('thead');
// 页面初始化的渲染
var searchData = [];//搜索后的数据
function render() {
    searchData = [];//搜索后的数据
    if (oWeekBtn.value == "") {
        searchData = data;
    } else if (oWeekBtn.value == "1") {
        for (var i = 0; i < data.length; i++) {
            // 获取一周前的时间戳
            w = new Date().getTime() - (1000 * 60 * 60 * 24 * 7);
            //获取需要查找的时间戳
            seek = Date.parse(data[i].time);
            if (seek >= w) {
                searchData.push(data[i]);
            }
        }
    } else if (oWeekBtn.value == "2") {
        for (var i = 0; i < data.length; i++) {
            // 获取一周前的时间戳
            w = new Date().getTime() - (1000 * 60 * 60 * 24 * 30);
            //获取需要查找的时间戳
            seek = Date.parse(data[i].time);
            if (seek >= w) {
                searchData.push(data[i]);
            }
        }
    } else {
        for (var i = 0; i < data.length; i++) {
            //开始时间的时间戳
            var str1 = oStart.value == '' ? new Date('1995-1-1').getTime() : new Date(oStart.value).getTime();
            //结束时间的时间戳
            var str2 = oEnd.value == '' ? new Date().getTime() : new Date(oEnd.value).getTime();
            //获取需要查找的时间戳
            seek = Date.parse(data[i].time);
            if (seek >= str1 && seek <= str2) {
                searchData.push(data[i]);
            }
        }
    }
    oTBody.innerHTML = '';//全部清空
    var renderArr = searchData.slice((page - 1) * count, page * count);
    for (var i = 0; i < renderArr.length; i++) {
        var oTr = document.createElement('tr');
        if (oTransactionBtn.value == "") {
            oTr.innerHTML = `
         <td>${renderArr[i].number} </td>
         <td>${renderArr[i].user}</td>
         <td>${renderArr[i].money}</td>
         <td>${renderArr[i].source}</td>
         <td>${renderArr[i].payment}</td>
         <td>${renderArr[i].state}</td>
         <td>${renderArr[i].time}</td>`;
        }
        else {
            oTr.innerHTML = `
         <td>${renderArr[i].number} </td>
         <td>${renderArr[i].user}</td>
         <td>${renderArr[i].refund}</td>
         <td>${renderArr[i].source}</td>
         <td>${renderArr[i].payment}</td>
         <td>${renderArr[i].state}</td>
         <td>${renderArr[i].time}</td>`;
        }
        oTBody.appendChild(oTr);
    }
    //添加表头
    oThead.innerHTML = '';//全部清空
        var oTitle = document.createElement('tr');
        if (oTransactionBtn.value == "") {
            oTitle.innerHTML = `
         <th>交易流水号</th>
         <th>用户</th>
         <th>交易金额</th>
         <th>来源</th>
         <th>支付方式</th>
         <th>交易状态</th>
         <th>交易时间</th>`;
        } else {
            oTitle.innerHTML = `
         <th>交易流水号</th>
         <th>用户</th>
         <th>退款金额</th>
         <th>来源</th>
         <th>支付方式</th>
         <th>交易状态</th>
         <th>交易时间</th>`;
        }
        oThead.appendChild(oTitle);
    //渲染页码
    var aPageBtn = document.querySelectorAll('.pageBtn');
    for (var i = 0; i < aPageBtn.length; i++) {
        oPagination.removeChild(aPageBtn[i].parentNode);
    }

    for (var i = 1; i <= Math.ceil(searchData.length / count); i++) {
        var oLi = document.createElement('li');
        oLi.innerHTML = `<a class="pageBtn" href="#">${i}</a>`;
        // oLi.classList.add('pageBtn');
        if (i == page) {
            oLi.classList.add('active');
        }
        oPagination.insertBefore(oLi, oPagination.lastElementChild);
    }
    //添加页码统计
    addPage.innerHTML = `共${Math.ceil(searchData.length / count)} 页/共${searchData.length}条`;
}

transactionFn();
render();

// 分页的事件
oPagination.addEventListener('click', changePage);
function changePage() {
    if (event.target.className == 'pageBtn') {
        // var aPageBtn = document.querySelectorAll('.pageBtn');
        // for (var i = 0; i < aPageBtn.length; i++) {
        //     aPageBtn[i].parentNode.classList.remove('active');
        // }
        // event.target.parentNode.classList.add('active');
        page = event.target.innerText;
        render();
    }
}

//给上一页和下一页加事件
oPrevBtn.addEventListener('click', prev);
oNextBtn.addEventListener('click', next);
function prev() {
    if (page > 1) {
        page--;
        render();
    }
}
function next() {
    if (page < Math.ceil(searchData.length / count)) {
        page++;
        render();
    }
}
//给最近一周按钮加事件
oWeekBtn.addEventListener('click', weekFn);
function weekFn() {
    oWeekBtn.value = "1"
    page = 1;
    render();
}

//给最近30天数据加按钮
oMonthBtn.addEventListener('click', monthFn);
function monthFn() {
    oWeekBtn.value = "2"
    page = 1;
    render();
}
//给导出按钮加事件
oDeriveBtn.addEventListener('click', derivFn);
function derivFn() {
    confirm('请您确认导出内容')
};
//给全部按钮加时间
oWholeBtn.addEventListener('click', wholeFn);
function wholeFn() {
    oWeekBtn.value = ""
    page = 1;
    render();
}

// 给日期筛选加事件
oStart.addEventListener('input', startFn);
oEnd.addEventListener('input', startFn);
function startFn() {
    oWeekBtn.value = "3"
    page = 1;
    render();
}
//插入订单总数
totalOrders.innerHTML = `${data.length}`;
//插入销售总额
totalSales.innerHTML = `￥${data.length * 200 + data2.length * 200}`;
//插入有效订单总额
totalValid.innerHTML = `￥${data.length * 200}`;
//给成交记录加事件
oTransactionBtn.addEventListener('click', transactionFn);
function transactionFn() {
    oWeekBtn.value = ""
    oTransactionBtn.value = "";
    page = 1;
    data.splice(0, data.length);
    for (var i = 0; i < data1.length; i++) {
        //循环获取data数组内的元素
        data.push(data1[i]); //把data数组内的元素添加到data数组
    }
    render();
    //添加表头
    oTransactionBtn.style.borderBottom = "2px solid rgba(0, 121, 254, 1)";
    oRefundBtn.style.borderBottom = "";
}
//给退款记录加事件
oRefundBtn.addEventListener('click', refundFn);
function refundFn() {
    oWeekBtn.value = ""
    oTransactionBtn.value = "1";
    page = 1;
    data.splice(0, data.length);
    for (var i = 0; i < data2.length; i++) {
        //循环获取data2数组内的元素
        data.push(data2[i]); //把data2数组内的元素添加到data数组
    }
    render();
    oTransactionBtn.style.borderBottom = "";
    oRefundBtn.style.borderBottom = "2px solid rgba(0, 121, 254, 1)";
}   
